<template>
    <div class="common-layout">
        <el-container>
            <el-header>
            <span class="icon">
                <el-icon :size="35">
                    <shop/>
                </el-icon>
            </span>
                <span class="title">Wang Wang Yang</span>
                <span class="b"><a @click="SignUp()">注册</a></span>>
                <span class="b"><a @click="SignIn()">登录</a></span>
            </el-header>

            <el-footer>&copy;2023 by Wang Wang Yang<sup>&reg;</sup></el-footer>
        </el-container>
    </div>
</template>

<script setup>
import {reactive} from "vue";
import axios from 'axios'
import router from '../router/index.js'
import {ElMessage} from "element-plus";


const onSubmit = () => {
    router.push('/SignUp');
}
</script>


<style scoped>
.common-layout{
    height: 100vh;
}

.el-header{
    height: 60px;
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
}

.el-container{
    background: url("../assets/vue.svg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.el-container.is-vertical{
    height: 100%;
}

.el-icon{
    color: orangered;
}

.icon{
    display: inline-block;
    vertical-align: middle;/*垂直方向居中对齐*/
}

.title{
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px;/* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}

.sign_up_card{
    margin: 80px 100px;
    width: 25%;
    border-radius: 10px;
    opacity: .8;
}

.el-footer{
    color: #f9f9f9;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: rgba(33, 33, 33, .8);
}
.b{
    padding-left: 10px;
}
</style>
